<style lang="less">

</style>
<template>
  <div  style="position: relative;">
    <mmTable :mmColumns="columns" ref="mmTable" :getUrl="url" :updateUrl="updateUrl" :delUrl="delUrl"
             :form="form" :formData="formData" v-on:formDataChange="formDataChange"
             :searchFormData="searchFormData" :searchForm="searchForm"
             :modalWidth="700"
    >
      <Form slot="searchForm" ref="searchForm" :model="searchFormData" inline :label-width="70"  style="float: left">
        <FormItem label="用户名" prop="">
          <Input v-model="searchFormData.name" type="text" placeholder="" />
        </FormItem>
      </Form>
      <Form  slot="editForm" :label-width="150" :model="formData" inline ref="editForm" :rules="formValidate">
        <Row>
          <Col :span="24">
          <FormItem label="编号" prop="code" style="width:500px">
            <Input v-model="formData.code" type="text"  />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
          <FormItem label="名称" prop="rname" style="width:500px">
            <Input v-model="formData.rname" type="text"  />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :span="24">
          <FormItem label="备注" prop="memo" style="width:500px">
            <Input v-model="formData.memo" type="textarea" height="200"/>
          </FormItem>
          </Col>
        </Row>
      </Form>

    </mmTable>
    <Modal title="分配权限" v-model="moduleVisible" :mask-closable='false' :width="800">
      <!--<Tree ref="tree" :data="permData" multiple show-checkbox></Tree>-->
      <Tree ref="depTree" :data="treeData" multiple></Tree>
      <div slot="footer">
        <Button type="text" @click="cancelModuleEdit">取消</Button>
        <Button type="primary" :loading="submitModuleLoading" @click="submitModuleEdit">提交</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
  import {getModuleByRole,saveRoleModule} from '@/api/data'
  import mmTable from '../components/mmtable/mmtable.vue';
  import { mapActions } from 'vuex'
  export default {
    components: {
      mmTable
    },
    data () {
      return {
        url:'/roles/getList',
        updateUrl:'/roles/Save',
        delUrl:'/roles/Delete',
        columns:[
          {title: "编号",key: "code",width:200,align:'center'},
          {title: "名称",key: "rname",width:150,align:'center'},
          {title: "备注",key: "memo",align:'left'},
          {
            title: "分配权限",
            key: "action",
            width:200,
            align: "center",
            render: (h, params) => {
              return  h(
                "Button",
                {
                  props: {
                    type: "warning",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      //this.editPerm(params.row);
                      this.editPerm(params.row)
                    }
                  }
                },
                "分配权限"
              )
            }
          }
        ],
        treeData:[],
        formData:{
          code:'',
          rname:'',
          rid:'',
          memo:''
        },
        form:{},
        formValidate:{
        },
        searchForm:{},
        searchFormData:{
          code:'',
          name:''
        },
        moduleVisible:false,
        tableLoading:false,
        submitModuleLoading:false,
        moduleColumns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {title: "编号",key: "code",width:200,align:'center'},
          {title: "名称",key: "name",width:150,align:'center'},
          {title: "权限",key: "mname",width:150,align:'center'},
          {title: "备注",key: "memo",align:'left'}
        ],
        moduleData:[],
        nowRid:'',
        checkData:[]
      };
    },
    mounted () {
      this.form = this.$refs.editForm;
      this.searchForm = this.$refs.searchForm;
      this.init();
    },
    methods: {
      ...mapActions([
        'getRoutersConfig'
      ]),
      init(){
      },
      editPerm(params) {
        let that = this
        this.tableLoading = true
        this.nowRid =params.rid
        getModuleByRole(params.rid).then(res => {
          this.tableLoading = false
          let data = res.data
          if (data.code === 200) {
            that.treeData = data.data
            this.moduleVisible=true;
          }
        }).catch(err => {
          console.log(err)
        })

      },
      formDataChange(data) {
        this.formData = data;
      },
      cancelModuleEdit(){
        this.moduleVisible=false;
      },
      submitModuleEdit(){
        let depIds = "";
        if (this.dataType != 0) {
          let selectedNodes = this.$refs.depTree.getSelectedNodes();
          if (selectedNodes.length < 1) {
            this.$Message.error("请至少选择一条数据");
            return;
          }
          selectedNodes.forEach(function (e) {
            depIds += e.mid + ",";
          });
          depIds = depIds.substring(0, depIds.length - 1);
          saveRoleModule({data:depIds, rid: this.nowRid}).then(res => {
              this.moduleVisible=false;
            this.nowRid="";
            this.getRoutersConfig().then(res =>{
              this.$router.addRoutes(res)
            })
            }).catch(err => {
              console.log(err)
            })
//          if(this.checkData.length>0){
//            let data ={}
//            let str = JSON.stringify(this.checkData);
//            data.data=str
//            data.rid=this.nowRid
//            saveRoleModule(data).then(res => {
//              this.moduleVisible=false;
//            }).catch(err => {
//              console.log(err)
//            })
//          }else{
//            this.moduleVisible=false;
//          }
        }
      },
      showTable(params){
        let that = this
        this.tableLoading = true
        this.nowRid =params.rid
        getModuleByRole(params.rid).then(res => {
          this.tableLoading = false
          let data = res.data
          if (data.code === 200) {
            that.moduleData = data.data.data
          }
        }).catch(err => {
          console.log(err)
        })
        this.moduleVisible=true;
      },
      tableSelect(selection ,now){
        this.checkData =selection
      },
      cancelTableSelect(selection ,now){
        this.checkData =selection
      } ,
      tableSelectAll(selection){
        this.checkData =selection
      },
      cancelTableSelectAll(selection){
        this.checkData =selection
      }
    }
  };
</script>
